<template>
  <layout>
    <div class="operaction">
      <el-button type="primary" @click="addRouteVisible = true">添加路由</el-button>
      <el-button type="primary">批量删除</el-button>
    </div>
    <el-table :data="tableData" border stripe empty-text="暂无数据" :header-cell-style="{ 'text-align': 'center' }">
      <el-table-column type="selection" width="55" />
      <el-table-column property="pageName" label="页面名称" />
      <el-table-column property="pageRouter" label="页面路由" />
      <el-table-column property="pageType" label="功能类型" />
      <el-table-column property="pageType" label="功能描述" />
      <el-table-column property="pageType" label="创建时间" />
      <el-table-column property="operaction" label="操作">
        <template #default="scope">
          <el-button link type="primary" size="small">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </layout>
  <el-dialog v-model="addRouteVisible" title="添加路由" width="500" :before-close="handleClose">
    <div>
      <el-form ref="formDataRef" style="max-width: 600px" :model="formData" status-icon :rules="rules" label-width="auto" class="demo-ruleForm">
        <el-form-item label="功能名称" prop="funcName">
          <el-input v-model="formData.funcName" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="访问路径" prop="functionUri">
          <el-input v-model="formData.functionUri" type="text" autocomplete="off" />
        </el-form-item>
        <el-form-item label="功能描述" prop="funcDesc">
          <el-input v-model.number="formData.funcDesc" />
        </el-form-item>
        <el-form-item label="服务类型" prop="typeOptions">
          <el-select v-model="formData.typeOptions" placeholder="请选择服务类型">
            <el-option label="页面" value="1" />
          </el-select>
        </el-form-item>
        <el-form-item label="模块信息" prop="age">
          <el-input v-model.number="formData.age" />
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(formDataRef)">提交</el-button>
        <el-button @click="resetForm(formDataRef)">取消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import layout from "../../components/layout.vue";
import { ref, reactive } from "vue";
const tableData = [];
let addRouteVisible = ref(false);
let formData = reactive({
  funcName: "",
  functionUri: "",
  funcDesc: "",
  typeOptions: "1",
});

let rules = reactive({
  funcName: [{ required: true, message: "此项必填", trigger: "blur" }],
  functionUri: [{ required: true, message: "此项必填", trigger: "blur" }],
  funcDesc: [{ required: true, message: "此项必填", trigger: "blur" }],
  typeOptions: [{ required: true, message: "此项必填", trigger: "blur" }],
});

let formDataRef = ref();

let handleClose = () => {
  addRouteVisible.value = false;
};
let submitForm = (formDataRef) => {
  formDataRef.validate((valid) => {
    if (valid) {
      formDataRef.resetFields();
      handleClose();
    }
  });
};
let resetForm = (formDataRef) => {
  formDataRef.resetFields();
  handleClose();
};
</script>

<style lang="less" scoped>
.operaction {
  display: flex;
  justify-content: right;
  align-items: center;
  margin: 5px 0;
}
</style>
